<template>
  <div class="audience" id="sydx">
    <!-- tit -->
    <div class="tit">
      <h2>适用对象</h2>
      <div class="empty-box"></div>
      <p>一诺万金智慧物业大脑平台适用住宅物业、商业物业、园区物业、后勤物业、集团化物业等多类型物业形态</p>
    </div>
    <!-- con -->
    <div class="con">
      <div
        class="item-box"
        v-for="item in message"
        :key="item.name"
      >
        <div class="item">
          <h2>{{ item.name }}</h2>
          <img :src="item.img" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Audience",
    data() {
      return {
        message: [
          {
            name: "住宅物业",
            img: require("../../../../assets/img/cpzx/wydn/sydx1.png")
          },
          {
            name: "商业物业",
            img: require("../../../../assets/img/cpzx/wydn/sydx2.png")
          },
          {
            name: "园区物业",
            img: require("../../../../assets/img/cpzx/wydn/sydx3.png")
          },
          {
            name: "后勤物业",
            img: require("../../../../assets/img/cpzx/wydn/sydx4.png")
          },
          {
            name: "集团化物业",
            img: require("../../../../assets/img/cpzx/wydn/sydx5.png")
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

@import "assets/scss/public";

.audience {
  width: 62.5%;
  margin: 40px auto;
  .tit {
    .empty-box {
      background: linear-gradient(90deg, #2f6bee, #009fff);
    }
  };
  .con {
    display: flex;
    // 每一个盒子
    .item-box {
      flex: 1;
      box-shadow: 0 0 10px #f5f5f5;
      text-align: center;
      margin-right: 24px;
      padding: 80px 0;
      h2 {
        font-size: 2.4rem;
        margin-bottom: 24px;
      }
    };
    // 最后一个设置样式
    .item-box:nth-last-child(1) {
      margin-right: 0;
    };
    // hover样式
    .item-box:hover {
      transition-duration: 0.3s;
      transform: translateY(-5px);
    }
  }
}

</style>